<template>
  <el-tabs v-model="activeTab" type="border-card" class="demo-tabs">
    <el-tab-pane name="tencent">
      <template #label>
        <span class="custom-tabs-label">
          <el-icon>
            <Connection />
          </el-icon>
          <span>腾讯云COS</span>
        </span>
      </template>
      <TencentCosConfig />
    </el-tab-pane>

    <el-tab-pane name="aliyun">
      <template #label>
        <span class="custom-tabs-label">
          <el-icon>
            <Connection />
          </el-icon>
          <span>阿里云OSS</span>
        </span>
      </template>
<!--      <el-empty description="暂未开放" />-->
    <AliOSSConfig/>
    </el-tab-pane>

  </el-tabs>
</template>

<script>
import { Connection } from '@element-plus/icons-vue'
import TencentCosConfig from './cos/TencentCosConfig.vue';
import AliOSSConfig from "@/views/cos/AliOSSConfig.vue";
export default {
  name: 'cosConfig',
  components: {AliOSSConfig, Connection, TencentCosConfig },
  data() {
    return {
      activeTab: 'tencent'
    }
  }
}
</script>


<style>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>